<template>
	<view>
		<fui-form ref="form">
			<view class="userHead">
				<fui-upload immediate :url="imageUpfileUrl" ref="HeadPicUpload" :fileList="headList" max="1"
					@success="HeadPicUpSuccess" @error="error" @complete="HeadPicUpComplete" width="180" height="180"
					radius="180" :isDel="true"></fui-upload>
			</view>
			<view style="width:70vw; margin:auto">
				<fui-form-item label="昵称" labelWidth="100" labelSize="26" borderColor="#e0e0e0">
					<fui-input :padding="[0]" placeholder="昵称" v-model="formData.nickName"></fui-input>
				</fui-form-item>
				<fui-form-item label="性别" labelWidth="100" labelSize="26" borderColor="#e0e0e0">
					<view class="sexBoy" @click="selectSex(1)"
						:style="{backgroundColor: (formData.sex.value === 1 ? '#FFDD00' : '#f0f0f0')}">男</view>
					<view class="sexGirl" @click="selectSex(0)"
						:style="{backgroundColor: (formData.sex.value === 0 ? '#FFDD00' : '#f0f0f0')}">女</view>
				</fui-form-item>
				<fui-form-item label="身份" labelWidth="100" labelSize="26" borderColor="#e0e0e0">
					<view @click="setUserRole">
						<view style="color:#CCC" v-if="userRoles[0].LabelName === '请设置您的身份角色'">请设置您的身份角色</view>
						<view style="color:#000" v-else>
							<text v-for="(item,index) in userRoles" :key="index">
								<text>{{ item.LabelName }}</text>
								<text v-if="userRoles.length > (index+1)"> / </text>
							</text>
						</view>
					</view>
				</fui-form-item>
				<fui-form-item label="生日" labelWidth="100" labelSize="26" borderColor="#e0e0e0">
					<view @click="showBirthday">
						<text style="color:#CCC" v-if="formData.birthday === '请设置您的生日'">{{formData.birthday}}</text>
						<text style="color:#000" v-else>{{formData.birthday}}</text>
					</view>
				</fui-form-item>
				<fui-form-item label="地区" labelWidth="100" labelSize="26" borderColor="#e0e0e0">
					<view @click="showCity">
						<text style="color:#CCC" v-if="formData.city === '请设置您所在的城市'">{{formData.city}}</text>
						<text style="color:#000" v-else>{{formData.city}}</text>
					</view>
				</fui-form-item>

				<uni-forms-item>
					<view style="padding-top:40rpx;">
						<fui-button background="#FFDD00" width="95%" height="70rpx" color="#000"
							@click="saveMyInfo">保存</fui-button>
					</view>
				</uni-forms-item>
			</view>
		</fui-form>
		<fui-picker linkage :options="sexs" :show="sexShow" @change="changeSex" @cancel="cancel('sex')"></fui-picker>
		<fui-date-picker :show="birthdayShow" type="3" minDate="1940-01-01" value="1990-01-01" @change="changeBirthday"
			@cancel="cancel('birthday')"></fui-date-picker>
		<fui-picker linkage :layer="3" :options="cityOptions" :show="cityShow" @change="changeCity"
			@cancel="cancel('city')"></fui-picker>
	</view>
</template>

<script>
	import cityData from "@/script/city.js";
	//校验规则
	const rules = [];
	export default {
		data() {
			return {
				flage: false,
				userInfo: {},
				imageUpfileUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=image',
				bgPics: [],
				bgpic: '',
				headList: [],
				headpic: '',
				//上传视频接口地址
				videoUpLoadUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=video',
				//上传状态，用于保存或其他操作时做判断
				upStatus: '',
				//上传的视频地址列表
				VideoUrls: [],
				//表单data数据
				formData: {
					saveType: 0,
					bgPic: '',
					headPic: '',
					nickName: '',
					sex: {
						value: -1,
						text: '请设置性别'
					},
					birthday: '请设置您的生日',
					city: '请设置您所在的地区',
					cityJson: {},
					cityCode: [],
					content: '',
					video: ''
				},
				sexShow: false,
				sexs: [{
						value: -1,
						text: '请设置性别'
					},
					{
						value: 0,
						text: '女'
					},
					{
						value: 1,
						text: '男'
					}
				],
				birthdayShow: false,
				cityShow: false,
				cityOptions: [],
				userRoles: [{
					LabelID: 0,
					LabelName: '请设置您的身份角色'
				}]
			};
		},
		onUnload() {
			// 没有点击保存 直接返回   需要吧登录 缓存清理一些
			if (!this.flage) {
				uni.removeStorageSync("isLogin")
			}
			console.log('关闭了');
		},
		onShow(options) {
			this.flage = false
			this.cityOptions = cityData.cityData;
			this.getUserInfo();
		},

		methods: {
			getUserInfo() {
				this.$httpost('/UserAction/getUserInfo').then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.userInfo = res.data.UserInfo
						if (res.data.UserRole.length > 0) {
							this.userRoles = res.data.UserRole
						}

						this.bgPics[0] = this.userInfo.BackgroundPic
						// // console.log(this.bgPics[0])
						this.headList[0] = this.userInfo.WxHeadPic

						// // console.log(this.userInfo.BackgroundPic, this.bgPics[0],this.headList[0])

						this.formData.nickName = this.userInfo.NickName

						if (!this.userInfo.UserSex) {
							this.formData.sex = this.formData.sex
						} else {
							this.formData.sex = JSON.parse(this.userInfo.UserSex)
						}
						if (!this.userInfo.UserBirth) {
							this.formData.birthday = '请设置您的生日'
						} else {
							this.formData.birthday = this.userInfo.UserBirth
						}
						if (!this.userInfo.UserCity) {
							this.formData.city = '请设置您所在的城市'
						} else {
							this.formData.cityJson = JSON.parse(this.userInfo.UserCityJson)
							this.formData.city = this.userInfo.UserCity
						}

						this.formData.content = this.userInfo.UserMemo

					}

				})
			},
			bgPicUpSuccess(e) {
				// console.log(e)
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.upStatus = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.bgPicUpload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			//上传失败时触发
			bgPicUpError(e) {
				// console.log(e)
				this.upStatus = e.status
			},
			//选择视频或上传完成时触发
			bgPicUpComplete(e) {
				this.upStatus = e.status
				this.bgPics = e.urls
				if (this.upStatus === 'success' && e.action === 'upload') {
					// console.log('this.bgPics', this.bgPics)
				}
			},
			HeadPicUpSuccess(e) {
				// console.log(e)
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.upStatus = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.HeadPicUpload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			//上传失败时触发
			HeadPicUpError(e) {
				// console.log(e)
				this.upStatus = e.status
			},
			//选择视频或上传完成时触发
			HeadPicUpComplete(e) {
				this.upStatus = e.status
				this.headList = e.urls
				if (this.upStatus === 'success' && e.action === 'upload') {
					// console.log(this.headList)
				}
			},
			//上传成功时触发
			VideoUpSuccess(e) {
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.upStatus = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的视频地址
					//e.index为视频索引值
					this.$refs.VideoUpload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			//上传失败时触发
			VideoUpError(e) {
				this.upStatus = e.status
			},
			//选择视频或上传完成时触发
			VideoUpComplete(e) {
				this.upStatus = e.status
				this.VideoUrls = e.urls
				if (this.upStatus === 'success' && e.action === 'upload') {
					// console.log(this.VideoUrls)
				}
			},
			showSex() {
				this.sexShow = true
			},
			showBirthday() {
				this.birthdayShow = true
			},
			showCity() {
				this.cityShow = true
			},
			selectSex(n) {
				this.formData.sex = this.sexs[n + 1];
			},
			changeSex(e) {
				// console.log(e)
				this.formData.sex = e
				this.sexShow = false
			},
			changeBirthday(e) {
				// console.log(e)
				this.formData.birthday = e.result
				this.birthdayShow = false
			},
			changeCity(e) {
				// console.log(e)
				this.formData.cityJson = e
				this.formData.city = e.result
				this.formData.cityCode = e.value
				this.cityShow = false
			},
			cancel(type) {
				if (type == 'sex') {
					this.sexShow = false
				}
				if (type == 'birthday') {
					this.birthdayShow = false
				}
				if (type == 'city') {
					this.cityShow = false
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			setUserRole() {
				// console.log('setUserRole')
				// this.goPage('/myPages/pages/setUerRole');				
				this.$common.goNavPage('/myPages/pages/setUerRole');
			},
			saveMyInfo() {
				// console.log('form', this.formData);
				this.$refs.form.validator(this.formData, rules).then(result => {

					if (result.isPassed) {
						this.formData.headPic = this.headList[0]

						if (this.formData.headPic == '' || this.formData.headPic == undefined) {
							this.$common.showToast("请上传一个头像！");
							return false;
						}

						if (this.formData.nickName == '') {
							this.$common.showToast("请为自己起个昵称！");
							return false;
						}

						if (this.userRoles.length === 0) {
							this.$common.showToast("请设置您的身份角色！");
							return false;
						} else {
							if (this.userRoles[0].LabelID === 0) {
								this.$common.showToast("请设置您的身份角色！");
								return false;
							}
						}

						if (this.formData.sex.value == -1) {
							this.$common.showToast("请设置您的性别！");
							return false;
						}
						if (this.formData.birthday == '请设置您的生日') {
							this.$common.showToast("请设置您的生日！");
							return false;
						}

						// console.log(this.formData.city, 'this.formData.city');
						if (this.formData.city == '请设置您所在的城市') {
							this.$common.showToast("请设置您所在的城市！");
							return false;
						}

						// console.log('this.formData', this.formData)

						this.$httpost('/UserAction/saveUserInfo', this.formData).then(res => {
							if (res.code == 200) {
								// console.log(res)
								// this.$common.goNavPage("/myPages/pages/mypage");

								// console.log("/myPages/pages/mypage");
								// uni.navigateBack()
								this.flage = true
								uni.switchTab({
									url: '/pages/my/index'
								})
							}
						});
					}
				}).catch(err => {
					// console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.userHead {
		width: 180rpx;
		height: 180rpx;
		background-color: #CCC;
		border-radius: 100rpx;
		margin: auto;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
	}

	.userHead image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
	}

	.sexBoy {
		float: left;
		width: 80rpx;
		height: 60rpx;
		background-color: #f0f0f0;
		border-radius: 50rpx;
		background-image: url('../../static/icon/boy.png');
		text-align: center;
		line-height: 60rpx;
		background-repeat: no-repeat;
		background-size: 30%;
		padding-left: 30rpx;
		background-position: 10rpx center;
	}

	.sexGirl {
		float: left;
		margin-left: 30rpx;
		width: 80rpx;
		height: 60rpx;
		background-color: #f0f0f0;
		border-radius: 50rpx;
		background-image: url('../../static/icon/girl.png');
		text-align: center;
		line-height: 60rpx;
		background-repeat: no-repeat;
		background-size: 30%;
		padding-left: 30rpx;
		background-position: 10rpx center;
	}
</style>